<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" :title="typeTitle" width="600px" @open="openDialog" @close="closeDialog">
    <px-table :data="tableData" class="equip-table" size="small" max-height="400" border>
      <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">
          {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
        </template>
      </px-table-column>
    </px-table>
    <!-- <div class="equip-table-pagination">
      <px-pagination
        v-if="total > 20"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        layout="prev, pager, next"
        :total="total"
        @current-change="sizeChange"
      />
    </div> -->

    <div class="equip-dialog-footer">
      <px-button type="primary" @click="closeDialog">关闭</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
// import { getByFaultType } from "@/api/erc/learn";
import { computed, reactive, toRefs } from "vue";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "faultTypeCode", "startTime", "endTime", "tableData", "workOrderIds"]);
// const props = defineProps(["dialogVisible", "faultTypeCode", "startTime", "endTime", "workOrderIds"]);
const visible = computed(() => props.dialogVisible);
const tableData = computed(() => props.tableData || []);
// 页面本身的值
const state = reactive<any>({
  typeTitle: "维修工单",
  // queryParams: {
  //   pageNum: 1,
  //   pageSize: 10,
  //   faultTypeCode: "",
  //   startTime: "",
  //   endTime: ""
  // },
  tableColumns: [
    { prop: "workOrderCode", label: "维修单号", minWidth: "240", showOverflowTooltip: true },
    { prop: "workOrderName", label: "工单主题", minWidth: "140", showOverflowTooltip: true }
  ],
  total: 0
});
const { typeTitle, tableColumns } = toRefs(state);

// 查询列表
// const queryTable = async () => {
//   const params = queryParams.value;
//   const data = await getByFaultType(params);
//   tableData.value = data?.data;
//   total.value = data?.total;
// };
// 页码改动，查询列表
// const sizeChange = val => {
//   queryParams.value.pageNum = val;
//   // queryTable();
// };
// 打开弹窗
const openDialog = async () => {
  // queryParams.value = {
  //   pageNum: 1,
  //   pageSize: 10,
  //   faultTypeCode: props.faultTypeCode,
  //   startTime: props.startTime,
  //   endTime: props.endTime
  // };
  // queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  // queryParams.value = {
  //   pageNum: 1,
  //   pageSize: 10,
  //   faultTypeCode: "",
  //   startTime: "",
  //   endTime: ""
  // };
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
@import url("@/views/erc/scss/add-dialog.scss");

.equip-dialog-wrap {
  .equip-table-pagination {
    position: relative;
    margin-top: 16px;
    text-align: right;

    .px-pagination {
      position: absolute;
      right: 0;
    }
  }

  .equip-dialog-footer {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
